// index.js
// const app = getApp()
const { envList } = require('../../envList.js');
const api = require('../../api')
import { request } from '../../util'
import { CanvasDraw } from './canvasDraw'

Page({
  data: {
    starDate:
    new Date(new Date().getTime() - 604800000).getFullYear() +
    '-' +
    parseInt(new Date(new Date().getTime() - 604800000).getMonth() + 1) +
    '-' +
    new Date(new Date().getTime() - 604800000).getDate(),
    endDate: new Date().getFullYear() + '-' + parseInt(new Date().getMonth() + 1) + '-' + new Date().getDate(),
    selDate: new Date().getTime(),
    minDate: new Date('2021,1,1').getTime(),
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      }
      if (type === 'month') {
        return `${value}月`
      }
      return value
    },
    show: false, // 用来显示弹出层
    show2:false,
    show3:false,
    show4:false,
    show5:false,
    isstart:true,
    vagelist:[],
    userInfo:wx.getStorageSync('userInfo'),
    checkvagedata:{},
    isadd:false,
    formdata:{
      purchasePlace:"",
      purchaseMoney:0,
      purchaseNum:0,
      purchaseDeposit:0,
      purchasePhone:"",
      purchaseDate:"",
      purchaseSignature:"",
      purchaseSellSignature:""
    },
    Stashformdata:{
      stashName:"",
      stashImg:""
    },
    purchase:[],


    // 签名数据
    canvasName: 'handWriting',
    ctx: '',
    canvasWidth: 0,
    canvasHeight: 0,
    transparent: 1, // 透明度
    selectColor: 'black',
    lineColor: '#1A1A1A', // 颜色
    lineSize: 1.5,  // 笔记倍数
    lineMin: 0.5,   // 最小笔画半径
    lineMax: 4,     // 最大笔画半径
    pressure: 1,     // 默认压力
    smoothness: 60,  //顺滑度，用60的距离来计算速度
    currentPoint: {},
    currentLine: [],  // 当前线条
    firstTouch: true, // 第一次触发
    radius: 1, //画圆的半径
    cutArea: { top: 0, right: 0, bottom: 0, left: 0 }, //裁剪区域
    bethelPoint: [],  //保存所有线条 生成的贝塞尔点；
    lastPoint: 0,
    chirography: [], //笔迹
    currentChirography: {}, //当前笔迹
    linePrack: [], //划线轨迹 , 生成线条的实际点
    issellQM: false,  //是否出售人签名
    currentActive:0,
    active:1,
    checkData:[],
    imageList:[],
    stashData:[],
    Satchimg:"",


    //绘制库存图
    canvasDraw:null,
    canvasEle :null,
    imgs:{
      star:"../../images/avatar.png",
      delete:"../../images/avatar.png"
    },
    startPoint:null, // 手绘起点
    createId:null,  // 手绘id
    fingers:1,  // 手指数量
    isDrawing: false, // 是否正在绘图

    startX: 0, // 保存 X 坐标
    startY: 0, // 保存 Y 坐标

    show7:false
  },
  onclick() {
    this.setData({ show: true, isstart: true })
    //查询数据
    console.log(this.data.starDate)
    console.log(this.data.endDate)
  },
  onclick3() {
    this.setData({ show5: true })
  },
  onclick2() {
    this.setData({ show: true, isstart: false })
  },
  onClose() {
    this.setData({ show: false })
  },
  onClose2(){
    this.setData({ 
      show2: false,
      formdata:{
        purchasePlace:"",
        purchaseMoney:0,
        purchaseNum:0,
        purchaseDeposit:0,
        purchasePhone:"",
        purchaseDate:"",
        purchaseSignature:"",
        purchaseSellSignature:""
      }
     })
  },
  onClose3(){
    this.setData({ show3: false })
  },
  onClose4(){
    this.setData({ show5: false })
  },
  onClose6(){
     this.setData({ show6:false})
  },
  
  //上传仓库平面图
  stashImgclick(){
    let _this = this;
    wx.showActionSheet({
      itemList: ['从相册中选择', '拍一张'],
      itemColor: "#f7982a",
      success(res){
        if (!res.cancel) {
          if (res.tapIndex == 0) {
            // 从相册中选择
            _this.chooseWxImage('album')
          } else if (res.tapIndex == 1) {
            // 使用相机
            _this.chooseWxImage('camera')
          }
        }
      }
    })
  },
   // 选择图片
   chooseWxImage(type) {
    let _this = this;
    let imgs = this.data.imageList;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: [type],
      success(res) {
        console.log(imgs);
        console.log(res);
        // return wx.showToast({
        //   title: '最多可上传一张图片',
        //   icon: 'none'
        // })
        _this.upload(res.tempFilePaths[0]);
        //console.log(res.tempFilePaths[0]);
      }
    })
  },
  //上传图片到服务器
  upload: function(path) {
    let _this = this;
    // let {ossUrl} = this.data.form;
    // console.log(ossUrl)
     wx.showToast({
         icon: "loading",
         title: "正在上传"
       }),
       //将本地资源上传到服务器
       wx.uploadFile({
         url: api.saveStash,    // 开发者服务器地址
         filePath: path,   // 要上传文件资源的路径 (本地路径)
         name: 'file',   // 文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
         header: {   
           // HTTP 请求 Header，Header 中不能设置 Referer
           "Content-Transfer-Encoding": "binary",
           "Content-Type": "application/octet-stream",
           "Content-Disposition": "form-data"
         },
         formData: {
           //和服务器约定的token, 一般也可以放在header中
           'token': wx.getStorageSync('userData').token,
         },
         success: function(res) {
           console.log(res)
           var data = JSON.parse(res.data);
           console.log(data);
           _this.setData({
             'Stashformdata.stashImg':data.data.imgUrl
           })
         },
         fail: function(e) {
           wx.showToast({
             title: '上传失败',
             icon: 'none'
           })
         },
         complete: function() {
           wx.hideToast(); //隐藏Toast
         }
       })
   },
   //上传仓库图预览
   stashImgclickYl(){
    wx.previewImage({
      current:this.data.Stashformdata.stashImg,
      urls:[
        this.data.Stashformdata.stashImg
      ],
      success:function(res){
        console.log(res)
      }
   })
   },
   //新增仓库平面图
   sueraddStash(){
     console.log(JSON.stringify(this.data.Stashformdata));
     request(api.addStash,{str:JSON.stringify(this.data.Stashformdata)},'post').then(function(res){
       console.log(res);
     })
   },
   selectStash(){
     var that = this;
      request(api.selectStash).then(function(res){
        that.setData({
          stashData:res.data
        })
      })
   },
   //新增仓库名
   onChangestashName(e){
      this.setData({
        "Stashformdata.stashName":e.detail
      })
   },
   //仓库选择详情
   onChangeStash(e){
      console.log(e);
      this.setData({
        Satchimg:this.data.stashData[e.detail.index].stashImg
      })
      console.log(this.data.Satchimg);
      this.bgImg();
   },

  //签名按钮
  qmclick(){
     this.setData({
       show3:true,
       issellQM:false
     })
  },
  qmclick2(){
    this.setData({
      show3:true,
      issellQM:true
    })
 },

 //签名点击
 qmyulanclick(){
   wx.previewImage({
    current:this.data.formdata.purchaseSignature,
    urls:[
      this.data.formdata.purchaseSignature
    ],
    success:function(res){
      console.log(res)
    }
   })
 },
 qmyulanclick2(){
  wx.previewImage({
    current:this.data.formdata.purchaseSellSignature,
    urls:[
      this.data.formdata.purchaseSellSignature
    ],
    success:function(res){
      console.log(res)
    }
 })
},
//不打印采购
NotPrint(){
  if(Object.keys(this.data.checkvagedata).length ==0){
    wx.showToast({
      title: '请选择采购品种',
      icon:"error"
    })
    return
  }
  this.setData({
    "formdata.purchaseSignature":this.data.formdata.purchaseSignature,
    "formdata.purchaseSellSignature":this.data.formdata.purchaseSellSignature,
    "formdata.userId":this.data.userInfo.id,
    "formdata.vageId":this.data.checkvagedata.vegetablesId,
  })
  //console.log(this.data.formdata)
  request(api.addpurchase,{"json":JSON.stringify(this.data.formdata)},"post").then(function(res){
      console.log(res);
  })
},
//打印采购单
  Print(){
    console.log(this.data.formdata);
    console.log(this.data.checkvagedata);
    
    if(Object.keys(this.data.checkvagedata).length ==0){
      wx.showToast({
        title: '请选择采购品种',
        icon:"error"
      })
      return
    }
    this.setData({
      "formdata.purchaseSignature":this.data.formdata.purchaseSignature,
      "formdata.purchaseSellSignature":this.data.formdata.purchaseSellSignature,
      "formdata.userId":this.data.userInfo.id,
      "formdata.vageId":this.data.checkvagedata.vegetablesId,
      "formdata.isPrint":1
    })
    request(api.addpurchase,{"json":JSON.stringify(this.data.formdata)},"post").then(function(res){
      console.log(res);
  })
  },
  //新增采购
  addPurchase(){
     this.setData({
      show2:true,
      isadd:true
     })
  },
  //日期选择
  confirmData(event) {
    let selData = new Date(event.detail).toLocaleDateString()
    // console.log(event.detail,selData)
    if (this.data.isstart) {
      this.setData({
        starDate: this.dataToStr(selData)
      })
    } else {
      this.setData({
        endDate: this.dataToStr(selData)
      })
    }
    this.selectpurchase();
  },
  cancelData() {
    this.onClose()
  },
  checkPurchase(event){
    this.setData({
      currentActive:event.currentTarget.dataset.keyid,
      checkData:this.data.purchase[event.currentTarget.dataset.keyid]
    })
  },
  detailBatchdata(e){
     console.log(123)
     console.log(e)
     console.log(this.data.checkData[e.currentTarget.dataset.keyid])
     wx.navigateTo({
      url: '/pages/examples/viewpurchaseDetail/index?purchaseData='+JSON.stringify(this.data.checkData[e.currentTarget.dataset.keyid])+'&isupdate=false'
    })

  },
  //日期选择2
  confirmData2(event){
    let selData = new Date(event.detail).toLocaleDateString()
    this.setData({
      "formdata.purchaseDate": this.dataToStr(selData),
      "show5":false
    })
  },
  cancelData2() {
    this.onClose4()
  },
  onplace(e){
    this.setData({
      "formdata.purchasePlace" : e.detail
    })
    //wx.navigateTo({ url: 'plugin://address-form/index' });
    // wx.navigateTo({
    //   url: `plugin://citySelector/index?key='TYDBZ-E4F6B-7V2US-JWWK2-CJ6TK-XEFFJ'&referer='key'&hotCitys=''`,
    // })
  },

  //日期格式转字符窜
  dataToStr(selData) {
    let selDataArr = selData.split('/')
    let strArr = selDataArr.map(function (value) {
      if (value.length == 1) {
        value = 0 + value
      }
      return value
    })

    return strArr.join('-')
  },
  vagelData() {
    var that = this;
    console.log(this.data.userInfo.id);
    request(api.vagedata,{userId: this.data.userInfo.id, roleId: this.data.userInfo.roleId}).then(function (res) {
      that.setData({
        vagelist: res.data.data
      })
    })
  },
  //选择数据
  checkvage(e){
    wx.getLocation({
 success (res) {
 }
    })
     this.setData({
       checkvagedata:this.data.vagelist[e.currentTarget.dataset.index]
     })
  },
  // 更改
  onChange(e){
    this.setData({
      "formdata.purchaseMoney":e.detail
    })
  },
  onChange2(e){
    this.setData({
      "formdata.purchaseNum":e.detail
    })
  },
  onChange3(e){
    this.setData({
      "formdata.purchaseDeposit":e.detail
    })
  },
  onChange5(e){
    this.setData({
      "formdata.purchasePhone":e.detail
    })
  },
  onShow() {
    this.vagelData();
    this.selectpurchase();
    this.bgImg();
  },

  //添加仓库平面图
  addstashBtn(){
    this.setData({
      show6:true
    })
  },

  // 签名事件函数
  
// 笔迹开始
uploadScaleStart (e) {
  if (e.type != 'touchstart') return false;
  let ctx = this.data.ctx;
  ctx.setFillStyle(this.data.lineColor);  // 初始线条设置颜色
  ctx.setGlobalAlpha(this.data.transparent);  // 设置半透明
  let currentPoint = {
    x: e.touches[0].x,
    y: e.touches[0].y
  }
  let currentLine = this.data.currentLine;
  currentLine.unshift({
    time: new Date().getTime(),
    dis: 0,
    x: currentPoint.x,
    y: currentPoint.y
  })
  this.setData({
    currentPoint,
    // currentLine
  })
  if (this.data.firstTouch) {
    this.setData({
      cutArea: { top: currentPoint.y, right: currentPoint.x, bottom: currentPoint.y, left: currentPoint.x },
      firstTouch: false
    })
  }
  this.pointToLine(currentLine);
},
// 笔迹移动
uploadScaleMove (e) {
  if (e.type != 'touchmove') return false;
  if (e.cancelable) {
    // 判断默认行为是否已经被禁用
    if (!e.defaultPrevented) {
      e.preventDefault();
    }
  }
  let point = {
    x: e.touches[0].x,
    y: e.touches[0].y
  }

  //测试裁剪
  if (point.y < this.data.cutArea.top) {
    this.data.cutArea.top = point.y;
  }
  if (point.y < 0) this.data.cutArea.top = 0;

  if (point.x > this.data.cutArea.right) {
    this.data.cutArea.right = point.x;
  }
  if (this.data.canvasWidth - point.x <= 0) {
    this.data.cutArea.right = this.data.canvasWidth;
  }
  if (point.y > this.data.cutArea.bottom) {
    this.data.cutArea.bottom = point.y;
  }
  if (this.data.canvasHeight - point.y <= 0) {
    this.data.cutArea.bottom = this.data.canvasHeight;
  }
  if (point.x < this.data.cutArea.left) {
    this.data.cutArea.left = point.x;
  }
  if (point.x < 0) this.data.cutArea.left = 0;

  this.setData({
    lastPoint: this.data.currentPoint,
    currentPoint: point
  })
  let currentLine = this.data.currentLine
  currentLine.unshift({
    time: new Date().getTime(),
    dis: this.distance(this.data.currentPoint, this.data.lastPoint),
    x: point.x,
    y: point.y
  })
  // this.setData({
  //   currentLine
  // })

  this.pointToLine(currentLine);
},
// 笔迹结束
uploadScaleEnd (e) {
  if (e.type != 'touchend') return 0;
  let point = {
    x: e.changedTouches[0].x,
    y: e.changedTouches[0].y
  }
  this.setData({
    lastPoint: this.data.currentPoint,
    currentPoint: point
  })
  let currentLine = this.data.currentLine
  currentLine.unshift({
    time: new Date().getTime(),
    dis: this.distance(this.data.currentPoint, this.data.lastPoint),
    x: point.x,
    y: point.y
  })
  // this.setData({
  //   currentLine
  // })
  if (currentLine.length > 2) {
    var info = (currentLine[0].time - currentLine[currentLine.length - 1].time) / currentLine.length;
    //$("#info").text(info.toFixed(2));
  }
  //一笔结束，保存笔迹的坐标点，清空，当前笔迹
  //增加判断是否在手写区域；
  this.pointToLine(currentLine);
  var currentChirography = {
    lineSize: this.data.lineSize,
    lineColor: this.data.lineColor
  };
  var chirography = this.data.chirography
  chirography.unshift(currentChirography);
  this.setData({
    chirography
  })
  var linePrack = this.data.linePrack
  linePrack.unshift(this.data.currentLine);
  this.setData({
    linePrack,
    currentLine: []
  })
  //console.log(this.data.linePrack)
},
retDraw () {
  this.data.ctx.clearRect(0, 0, 700, 730)
  this.data.ctx.draw()
},

//画两点之间的线条；参数为:line，会绘制最近的开始的两个点；
pointToLine (line) {
  this.calcBethelLine(line);
  return;
},
//计算插值的方式；
calcBethelLine (line) {
  if (line.length <= 1) {
    line[0].r = this.data.radius;
    return;
  }
  let x0, x1, x2, y0, y1, y2, r0, r1, r2, len, lastRadius, dis = 0, time = 0, curveValue = 0.5;
  if (line.length <= 2) {
    x0 = line[1].x
    y0 = line[1].y
    x2 = line[1].x + (line[0].x - line[1].x) * curveValue;
    y2 = line[1].y + (line[0].y - line[1].y) * curveValue;
    //x2 = line[1].x;
    //y2 = line[1].y;
    x1 = x0 + (x2 - x0) * curveValue;
    y1 = y0 + (y2 - y0) * curveValue;;

  } else {
    x0 = line[2].x + (line[1].x - line[2].x) * curveValue;
    y0 = line[2].y + (line[1].y - line[2].y) * curveValue;
    x1 = line[1].x;
    y1 = line[1].y;
    x2 = x1 + (line[0].x - x1) * curveValue;
    y2 = y1 + (line[0].y - y1) * curveValue;
  }
  //从计算公式看，三个点分别是(x0,y0),(x1,y1),(x2,y2) ；(x1,y1)这个是控制点，控制点不会落在曲线上；实际上，这个点还会手写获取的实际点，却落在曲线上
  len = this.distance({ x: x2, y: y2 }, { x: x0, y: y0 });
  lastRadius = this.data.radius;
  for (let n = 0; n < line.length - 1; n++) {
    dis += line[n].dis;
    time += line[n].time - line[n + 1].time;
    if (dis > this.data.smoothness) break;
  }
  this.setData({
    radius: Math.min(time / len * this.data.pressure + this.data.lineMin, this.data.lineMax) * this.data.lineSize
  });
  line[0].r = this.data.radius;
  //计算笔迹半径；
  if (line.length <= 2) {
    r0 = (lastRadius + this.data.radius) / 2;
    r1 = r0;
    r2 = r1;
    //return;
  } else {
    r0 = (line[2].r + line[1].r) / 2;
    r1 = line[1].r;
    r2 = (line[1].r + line[0].r) / 2;
  }
  let n = 5;
  let point = [];
  for (let i = 0; i < n; i++) {
    let t = i / (n - 1);
    let x = (1 - t) * (1 - t) * x0 + 2 * t * (1 - t) * x1 + t * t * x2;
    let y = (1 - t) * (1 - t) * y0 + 2 * t * (1 - t) * y1 + t * t * y2;
    let r = lastRadius + (this.data.radius - lastRadius) / n * i;
    point.push({ x: x, y: y, r: r });
    if (point.length == 3) {
      let a = this.ctaCalc(point[0].x, point[0].y, point[0].r, point[1].x, point[1].y, point[1].r, point[2].x, point[2].y, point[2].r);
      a[0].color = this.data.lineColor;
      // let bethelPoint = this.data.bethelPoint;
      // console.log(a)
      // console.log(this.data.bethelPoint)
      // bethelPoint = bethelPoint.push(a);
      this.bethelDraw(a, 1);
      point = [{ x: x, y: y, r: r }];
    }
  }
  this.setData({
    currentLine: line
  })
},
//求两点之间距离
distance (a, b) {
  let x = b.x - a.x;
  let y = b.y - a.y;
  return Math.sqrt(x * x + y * y);
},
ctaCalc (x0, y0, r0, x1, y1, r1, x2, y2, r2) {
  let a = [], vx01, vy01, norm, n_x0, n_y0, vx21, vy21, n_x2, n_y2;
  vx01 = x1 - x0;
  vy01 = y1 - y0;
  norm = Math.sqrt(vx01 * vx01 + vy01 * vy01 + 0.0001) * 2;
  vx01 = vx01 / norm * r0;
  vy01 = vy01 / norm * r0;
  n_x0 = vy01;
  n_y0 = -vx01;
  vx21 = x1 - x2;
  vy21 = y1 - y2;
  norm = Math.sqrt(vx21 * vx21 + vy21 * vy21 + 0.0001) * 2;
  vx21 = vx21 / norm * r2;
  vy21 = vy21 / norm * r2;
  n_x2 = -vy21;
  n_y2 = vx21;
  a.push({ mx: x0 + n_x0, my: y0 + n_y0, color: "#1A1A1A" });
  a.push({ c1x: x1 + n_x0, c1y: y1 + n_y0, c2x: x1 + n_x2, c2y: y1 + n_y2, ex: x2 + n_x2, ey: y2 + n_y2 });
  a.push({ c1x: x2 + n_x2 - vx21, c1y: y2 + n_y2 - vy21, c2x: x2 - n_x2 - vx21, c2y: y2 - n_y2 - vy21, ex: x2 - n_x2, ey: y2 - n_y2 });
  a.push({ c1x: x1 - n_x2, c1y: y1 - n_y2, c2x: x1 - n_x0, c2y: y1 - n_y0, ex: x0 - n_x0, ey: y0 - n_y0 });
  a.push({ c1x: x0 - n_x0 - vx01, c1y: y0 - n_y0 - vy01, c2x: x0 + n_x0 - vx01, c2y: y0 + n_y0 - vy01, ex: x0 + n_x0, ey: y0 + n_y0 });
  a[0].mx = a[0].mx.toFixed(1);
  a[0].mx = parseFloat(a[0].mx);
  a[0].my = a[0].my.toFixed(1);
  a[0].my = parseFloat(a[0].my);
  for (let i = 1; i < a.length; i++) {
    a[i].c1x = a[i].c1x.toFixed(1);
    a[i].c1x = parseFloat(a[i].c1x);
    a[i].c1y = a[i].c1y.toFixed(1);
    a[i].c1y = parseFloat(a[i].c1y);
    a[i].c2x = a[i].c2x.toFixed(1);
    a[i].c2x = parseFloat(a[i].c2x);
    a[i].c2y = a[i].c2y.toFixed(1);
    a[i].c2y = parseFloat(a[i].c2y);
    a[i].ex = a[i].ex.toFixed(1);
    a[i].ex = parseFloat(a[i].ex);
    a[i].ey = a[i].ey.toFixed(1);
    a[i].ey = parseFloat(a[i].ey);
  }
  return a;
},
bethelDraw (point, is_fill, color) {
  let ctx = this.data.ctx;
  ctx.beginPath();
  ctx.moveTo(point[0].mx, point[0].my);
  if (undefined != color) {
    ctx.setFillStyle(color);
    ctx.setStrokeStyle(color);
  } else {
    ctx.setFillStyle(point[0].color);
    ctx.setStrokeStyle(point[0].color);
  }
  for (let i = 1; i < point.length; i++) {
    ctx.bezierCurveTo(point[i].c1x, point[i].c1y, point[i].c2x, point[i].c2y, point[i].ex, point[i].ey);
  }
  ctx.stroke();
  if (undefined != is_fill) {
    ctx.fill(); //填充图形 ( 后绘制的图形会覆盖前面的图形, 绘制时注意先后顺序 )
  }
  ctx.draw(true)
},
selectColorEvent (event) {
  console.log(event)
  var color = event.currentTarget.dataset.colorValue;
  var colorSelected = event.currentTarget.dataset.color;
  this.setData({
    selectColor: colorSelected,
    lineColor: color
  })
},
//设置canvas背景色  不设置  导出的canvas的背景为透明 
    //@params：字符串  color
    setCanvasBg(color){
 
      console.log(999);
      /* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
      //rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
      //这里是 canvasHeight - 4 是因为下边盖住边框了，所以手动减了写
      this.data.ctx.rect(0, 0, this.data.canvasWidth, this.data.canvasHeight - 4);  
      // ctx.setFillStyle('red')
      this.data.ctx.setFillStyle( color )
      this.data.ctx.fill()  //设置填充
      this.data.ctx.draw()    //开画
  },
  retDraw() {
    this.data.ctx.clearRect(0, 0, 700, 730)
    this.data.ctx.draw();
 
    //设置canvas背景
    this.setCanvasBg("#fff");
  },
  rebackCanvas(){
    this.setData({
      show3:false
    })
    this.data.ctx.clearRect(0, 0, 700, 730)
    this.data.ctx.draw();
  },
  //保存到相册
  saveCanvasAsImg(){
    var that = this;
    //微信调用保存
    wx.canvasToTempFilePath({
        canvasId: 'handWriting',
        fileType: 'png',
        quality: 1, //图片质量
        success(res) {
            wx.uploadFile({
              url:api.saveQm,
              filePath:res.tempFilePath,
              name: 'file',
              success(res){
                var data = JSON.parse(res.data)
                if (that.data.issellQM) {
                    //出售人签名
                    that.setData({
                      "formdata.purchaseSellSignature":data.data.imgUrl,
                      "show3":false
                    })
                }else{
                    //采购人签名 
                    that.setData({
                      "formdata.purchaseSignature":data.data.imgUrl,
                      "show3":false
                    })
                }
              }
            })
        }
    })
},
//预览
previewCanvasImg(){
  wx.canvasToTempFilePath({
      canvasId: 'handWriting',
      fileType: 'jpg',
      quality: 1, //图片质量
      success(res) {
          // console.log(res.tempFilePath, 'canvas生成图片地址');
          wx.previewImage({
              urls: [res.tempFilePath], //预览图片 数组
          })
      }
  })
},
//上传
uploadCanvasImg() {
 
  wx.canvasToTempFilePath({
      canvasId: 'handWriting',
      fileType: 'png',
      quality: 1, //图片质量
      success(res) {
          // console.log(res.tempFilePath, 'canvas生成图片地址');
          //上传
          wx.uploadFile({
              url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
              filePath: res.tempFilePath,
              name: 'file_signature',
              formData: {
                  user: 'test'
              },
              success(res) {
                  const data = res.data
                  // do something
              }
          })
      }
  })
},
//查询数据
selectpurchase(){
  var that = this;
  request(api.getpurchases,{"startDate":this.data.starDate,"endDate":this.data.endDate},"post").then(function(res){
    var dt = Object.keys(res.data);
    console.log(res.data)
    console.log(dt[0]);
    var ovjdata;
    if (dt[0]==null || dt[0]==undefined) {
      ovjdata=0
    }else{
      ovjdata=dt[0]
    }
     that.setData({
      purchase:res.data,
      checkData:res.data[dt[0]],
      currentActive:ovjdata
     })
     console.log(that.data.currentActive)
  })
},
//采购数据
//select

editbatchdata(e){
   console.log(e)
   console.log(JSON.stringify(this.data.checkData[e.currentTarget.dataset.id]))
   wx.navigateTo({
    url: '/pages/examples/viewpurchaseDetail/index?purchaseData='+JSON.stringify(this.data.checkData[e.currentTarget.dataset.id])+'&isupdate=true'
  })

},
  onLoad (){
    this.selectpurchase();
    this.selectStash();
    this.initCanvas();
    let canvasName = this.data.canvasName
    let ctx = wx.createCanvasContext(canvasName)
    this.setData({
      ctx: ctx
    })
    var query = wx.createSelectorQuery();
    query.select('.handCenter').boundingClientRect(rect => {
      this.setData({
        canvasWidth: rect.width,
        canvasHeight: rect.height
      })
    }).exec();
  },
  beforeDestroy(){
     /** 销毁对象 */
    if (this.canvasDraw) {
      this.data.canvasDraw.destroy()
      this.data.canvasDraw = null
    }
  },
  mounted(){
    //初始化 仓库绘制
    this.mounted()
  },
  checkplace(){
    console.log(123)
  },
  delbatchdata(e){
    //选择数据
    console.log(e);
    console.log(this.data.purchase[this.data.currentActive][e.currentTarget.dataset.id]);
  },
   /** canvas设置背景图片 */
   bgImg: function () {
    //注意这里的 canvas 要与wxml文件的canvas-id属性命名一样
      const ctx = wx.createCanvasContext('canvas'); 
      let width = 500;
      let height = 300;
      let bgPicturePath = this.data.Satchimg;//图片路径不要出错
      ctx.drawImage(bgPicturePath, 0, 0, width, height);
      ctx.draw();//绘制背景图片
    },

    //绘制图
     /** 初始化canvas */
     initCanvas() {
      const query = wx.createSelectorQuery().in(this);
      setTimeout(res=>{
        query.select("#myCanvas")
        .fields({ node: true, size: true, rect: true })
        .exec((res) => {
          const ele = res[0].node
          const context = ele.getContext("2d")
          const dpr = wx.getWindowInfo().pixelRatio
          ele.width = res[0].width * dpr
          ele.height = res[0].height * dpr
        context.scale(dpr, dpr);
          this.setData({
            canvasEle:context
          })

          // 配置项
          // const option = {
          //   ele: this.data.canvasEle, // canvas元素
          //   drawCallBack: this.draw, // 用户自定义绘图方法
          //   scale: 1, // 当前缩放倍数
          //   scaleStep: 0.1, // 缩放步长（按钮)
          //   touchScaleStep: 0.005, // 缩放步长（手势）
          //   maxScale: 2, // 缩放最大倍数（缩放比率倍数）
          //   minScale: 0.5, // 缩放最小倍数（缩放比率倍数）
          //   translate: { x: 0, y: 0 }, // 默认画布偏移
          //   isThrottleDraw: true, // 是否开启节流绘图（建议开启，否则安卓调用频繁导致卡顿）
          //   throttleInterval: 20, // 节流绘图间隔，单位ms
          //   pixelRatio: wx.getSystemInfoSync().pixelRatio, // 像素比（高像素比可以解决高清屏幕模糊问题）
          //   controls: {
          //     delete: {
          //       radius: 20,
          //       fill: '#f00',
          //       customDraw: this.drawDeleteControl,
          //     },
          //   }
          // }
          //this.data.canvasDraw = new CanvasDraw(option) // 创建CanvasDraw实例后就可以使用实例的所有方法了
          //this.addEvents() // 添加事件监听
          //this.data.canvasDraw.draw() // 可以按实际需要调用绘图方法
        })
      },2000)
    },

    /** 绑定组件内置事件 */
    addEvents() {
      this.data.canvasDraw.on('selection:updated', this.onSelectionUpdated)
      this.data.canvasDraw.$emit('selection:cleared', this.onSelectionCleared)
      this.data.canvasDraw.$emit('touchstart', this.onTouchstart)
      this.data.canvasDraw.$emit('touchmove', this.onTouchmove)
      this.data.canvasDraw.$emit('touchend', this.onTouchend)
      this.data.canvasDraw.$emit('tap', this.onTap)
      this.data.canvasDraw.$emit('deleteControl:tap', this.onDeleteControl)
    },
    /** 用户自定义绘图内容 */
    draw() {
      // 1.默认绘图方式-圆形
      // const { ctx } = this.canvasDraw
      // ctx.beginPath()
      // ctx.strokeStyle = '#000'
      // ctx.arc(50, 50, 50, 0, 2 * Math.PI)
      // ctx.stroke()
      // ctx.closePath()
    },
    /** 中心放大 */
    zoomIn() {
      this.data.canvasDraw.zoomIn()
    },

    /** 中心缩小 */
    zoomOut() {
      this.data.canvasDraw.zoomOut()
    },

    /** 重置画布（回复初始效果） */
    reset() {
      this.canvasDraw.reset()
    },

    /** 清空画布 */
    clear() {
      this.canvasDraw.clear()
    },

    /** 组件方法-绘制多边形 */
    addShape() {
      const opt = {
        points: [
          { x: 148, y: 194 },
          { x: 196, y: 191 },
          { x: 215, y: 244 },
          { x: 125, y: 249 },
        ],
        style: { strokeWidth: 2, stroke: '#000', lineDash: [2, 2], fill: 'red' },
      }
      this.canvasDraw.drawShape(opt)
    },

    /** 组件方法-绘制多线段 */
    addLines() {
      const opt = {
        points: [
          { x: 53, y: 314 },
          { x: 116, y: 283 },
          { x: 166, y: 314 },
          { x: 224, y: 283 },
          { x: 262, y: 314 },
        ],
        style: { strokeWidth: 2, stroke: '#000', lineDash: [2, 2] },
        angle: 45,
      }
      this.canvasDraw.drawLines(opt)
    },

    /** 组件方法-绘制文字 */
    addText() {
      const opt = {
        text: '组件方法-绘制文字',
        points: [{ x: 175, y: 150 }],
        style: {
          fill: '#000',
          textAlign: 'center',
          textBaseline: 'middle',
        },
      }
      this.canvasDraw.drawText(opt)
    },

    /** 组件方法-绘制点 */
    addPoint() {
      const opt = {
        points: [{ x: 150, y: 50 }],
        style: { radius: 20, strokeWidth: 2, stroke: '#00f', lineDash: [2, 2], fill: '#0f0' },
      }
      this.canvasDraw.drawPoint(opt)
    },

    /** 组件方法-绘制图片点 */
    addImagePoint() {
      const opt = {
        points: [{ x: 300, y: 50 }],
        style: { radius: 40, img: this.imgs.star },
        angle: 45,
      }
      this.canvasDraw.drawPoint(opt)
    },

    /** 用户手绘矩形 */
    handDraw() {
      // 如果是手绘则禁止拖拽画布，否则启动拖拽画布
      this.setData({
        isDrawing:!this.data.isDrawing,
        "canvasDraw.canDragCanvas":!this.data.isDrawing
      })
      // this.data.isDrawing = !this.data.isDrawing
      // this.data.canvasDraw.canDragCanvas = !this.data.isDrawing
    },

    /** 组件内置事件 */
    onSelectionUpdated(item) {
      if (this.isDrawing) return
      console.log('选中元素：', item)
      item.style.fill = 'green'
      item.controlsVis = { delete: true }
      item.zIndex = 1
      this.canvasDraw.draw()
    },
    onSelectionCleared(item) {
      if (this.isDrawing) return
      console.log('取消选中：', item)
      if (!item) return
      item.style.fill = 'red'
      item.controlsVis = { delete: false }
      item.zIndex = 0
      this.canvasDraw.draw()
    },
    onTouchstart(e) {
      //console.log('触摸开始：', e)
      // var  poit = {
      //   x:e.changedTouches[0].x,
      //   y:e.changedTouches[0].y,
      // },
      this.setData({
        startX : e.changedTouches[0].x,
        startY :e.changedTouches[0].y
      })
       // 进行一些绘制的准备工作（笔粗细、颜色、笔头）
    // 如果使用过微信小程序旧版接口的同学，需要注意
    // 现在很多方法都没有，已经停止维护
    this.data.canvasEle.lineWidth =5; // 笔粗细
    this.data.canvasEle.strokeStyle = "#000" // 画笔颜色
    this.data.canvasEle.lineCap = 'round'; // 设置笔头

    // 开始绘制
    setTimeout(res=>{
      this.data.canvasEle.beginPath();
    },2000);
   

    
      // this.setData({
        
      //  "createId":`user_${new Date().getTime()}`,
      //  "fingers":e.touches.length,
      //  "isDrawing":true
      // })
    // wx.createSelectorQuery()
    //                 .select("#myCanvas")
    //                 .fields({ node: true, size: true })
    //                 .exec((res)=>{
    //                   console.log(res);
    //                   var canvasNode = res[0].node;
    //                   var context = canvasNode.getContext('2d');
                      // context.lineCap="round";
                      // context.lineJoin="round";
                      // context.strokeStyle="#D20103";
                      // context.lineWidth=5;
                      // context.moveTo(this.data.startPoint.x,this.data.startPoint.y);

        //               const dpr = wx.getSystemInfoSync().pixelRatio
        //               canvasNode.width = res[0].width * dpr
			  //   canvasNode.height = res[0].height * dpr
			  //   context.scale(dpr, dpr)
				//   context.clearRect(0, 0, context.canvas.width, context.canvas.height)
				// const image = canvasNode.createImage()
				// image.src = 'https://tse3-mm.cn.bing.net/th/id/OIP-C.3r1vguZyWFUJ80A2Nf2k3AHaEK?rs=1&pid=ImgDetMain'
				// image.onload = () => {
				// 	console.log("图片加载完成",context)
				//     context.drawImage(
				//         image,
				//         0,
				//         0,
				//         150,
				//         100,
				//     )
				// 	context.fillStyle="red"
				// 	context.strokeStyle="blue"
				// 	context.beginPath()
				// 	context.moveTo(10,10)
				// 	context.lineTo(60, 10)
				// 	context.lineTo(60, 40)
				// 	context.closePath()
				// 	context.stroke()
				// 	context.fill()
				// 	// 这里绘制完成
				// 	console.log('draw done')
				// }
                   // })
      

      // this.data.canvasEle.lineCap="round";
      // this.data.canvasEle.lineJoin="round";
      // this.data.canvasEle.strokeStyle="#1b76c0";
      // this.data.canvasEle.lineWidth  =5;
      // this.data.canvasEle.moveTo(this.data.startPoint.x,this.data.startPoint.y);
      // this.data.startPoint = {
      //   x:e.changedTouches[0].x,
      //   y:e.changedTouches[0].y,
      // }
      //this.data.createId = `user_${new Date().getTime()}`
      //this.data.fingers = e.touches.length
    },
    onTouchmove(e) {
      console.log('触摸移动：', e)
      // 移动的时候，得到的实时的坐标
    var startX1 = e.changedTouches[0].x;
    var startY1 = e.changedTouches[0].y;
    // 首先将画笔移动到手指按下的地方
    this.data.canvasEle.moveTo(this.data.startX, this.data.startY);
    // 描线，根据实时的坐标进行进行描线
    this.data.canvasEle.lineTo(startX1, startY1);
    // 绘制直线
    this.data.canvasEle.stroke();

    // 注意，这个步骤也很重要，需要更新起始坐标
    this.setData({
      startX:startX1,
      startY:startY1
    })
    // this.startX = startX1;
    // this.startY = startY1;
   

      // 如果是绘制状态，触摸移动则进行矩形绘制
      // if (this.data.fingers !== 1 || !this.data.isDrawing) return
      // console.log("fingers"+this.data.fingers)
      // const tsPoint = this.data.startPoint
      // const tmPoint = {
      //   x:e.touches[0].x,
      //   y:e.touches[0].y,
      // }
      // var context = wx.createCanvasContext("myCanvass");
      // console.log(context);
      // context.lineCap="round";
      // context.lineJoin="round";
      // context.strokeStyle="#D20103";
      // context.lineWidth=5;
      // context.lineTo(this.data.startPoint.x,this.data.startPoint.y);
      // context.stroke();

      // this.data.canvasEle.lineCap="round";
      // this.data.canvasEle.lineJoin="round";
      // this.data.canvasEle.strokeStyle ="#1b76c0";
      // this.data.canvasEle.lineWidth  =5;
      // this.data.canvasEle.lineTo(tmPoint.x,tmPoint.y);
      // this.data.canvasEle.stroke();
      // 两点距离小于5，不进行绘制
      // if (Math.abs(tmPoint.x - tsPoint.x) <= 5 || Math.abs(tmPoint.y - tsPoint.y) <= 5) return
      // // 先移除，再绘制
      // console.log("canvasDraw"+this.data.canvasDraw)
      // this.data.canvasDraw.removeChild(this.data.createId)
      // this.data.canvasDraw.draw()
      // const opt = {
      //   id: this.data.createId,
      //   points: [tsPoint, { x: tmPoint.x, y: tsPoint.y }, tmPoint, { x: tsPoint.x, y: tmPoint.y }],
      //   style: { strokeWidth: 2, stroke: 'rgba(0,0,0,.4)', fill: 'rgba(255,0,0,.4)' },
      // }
      // this.data.canvasDraw.drawShape(opt)
    },
    onTouchend(e) {
      //console.log('触摸结束：', e)
      this.data.canvasEle.closePath();
      // 如果是绘制状态，设置最后一个绘制的为选中状态，及显示删除控制点
      //if (!this.data.isDrawing) return
      // this.data.canvasDraw.children.forEach((item) => {
      //   if (item.id === this.data.createId) {
      //     item.style.stroke = 'blue'
      //     item.isSelect = true
      //     item.controlsVis = { delete: true }
      //   } else {
      //     item.style.stroke = 'black'
      //     item.isSelect = false
      //     item.controlsVis = { delete: false }
      //   }
      // })
      // this.data.canvasDraw.draw()
    },
    onTap(e) {
      console.log('点击坐标：', e.point)
      console.log('所有canvas子对象：', this.canvasDraw.children)
    },
    onDeleteControl(e) {
      console.log('点击删除控制点', e)
      this.canvasDraw.removeChild(e.id)
      this.canvasDraw.draw()
    },
    // 自定义绘制删除控制点
    drawDeleteControl(opt) {
      this.data.canvasDraw.drawPoint(
        {
          id: 'delete',
          points: opt.points,
          style: {
            img: this.data.imgs.delete,
            radius: 20,
          },
        },
        false
      )
    },

    /** canvas事件绑定 */
    touchstart(e) {
      this.canvasDraw.touchstart(e)
    },
    touchmove(e) {
      this.canvasDraw.touchmove(e)
    },
    touchend(e) {
      this.canvasDraw.touchend(e)
    },

    addstashBtn2(){
      this.setData({
        show7:true
      })
    }

});
